<template>
    <el-drawer
    :modal="false"
    title="订单详情"
    :visible.sync="drawer"
    direction="rtl"
    :size="size">
    <el-table :data="gridData">
        <el-table-column property="title" label="产品名称" width="150"></el-table-column>
        <el-table-column property="price" label="价格" width="200"></el-table-column>
        <el-table-column property="guige" label="规格"></el-table-column>
        <el-table-column property="num" label="数量"></el-table-column>
        <el-table-column property="sum" label="小计(元)"></el-table-column>
        </el-table>
    </el-drawer>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data(){
        return {
            gridData: [],
            drawer: false,
            width:1024,
            menu_width:200,
            size:'1024px'
        }
    },
    computed:{
        ...mapState(['collapse'])
    },
    created(){
        
    },
    mounted(){
        this.width=document.documentElement.clientWidth;
        this.menu_width=document.querySelector('.menu').clientWidth;
        this.size=this.width-this.menu_width-10+'px';
        this.$api.getOrderDetail().then((res)=>{
            if(res.data.status===200){
                // console.log(res.data.result.list);
                this.gridData=res.data.result.list;
            }
        })
    },
    watch:{
        collapse(newval){
            if(newval){
                this.width=document.documentElement.clientWidth;
                this.menu_width=64;
                this.size=this.width-this.menu_width-10+'px';
            }else{
                this.width=document.documentElement.clientWidth;
                this.menu_width=200;
                this.size=this.width-this.menu_width-10+'px';
            }
        }
    }
}
</script>

<style>

</style>